@import 'uview-ui/theme.scss';

//refer to the style - turquoise at https://aicolors.co
// --primary-100:#26A69A;
// --primary-200:#408d86;
// --primary-300:#cdfaf6;
// --accent-100:#80CBC4;
// --accent-200:#43A49B;
// --text-100:#263339;
// --text-200:#728f9e;
// --bg-100:#E0F2F1;
// --bg-200:#D0EBEA;
// --bg-300:#FFFFFF;

/* 页面左右间距 */
$page-row-spacing: 16upx;
$page-color-base: #f8f8f8;
$page-color-light: #f8f6fc;
$base-color: #26A69A;

/* 文字尺寸 */
$font-sm: 24upx;
$font-base: 28upx;
$font-lg: 32upx;
/*文字颜色*/
$font-color-dark: #303133;
$font-color-base: #606266;
$font-color-light: #909399;
$font-color-disabled: #C0C4CC;
$font-color-selected: #408d86;
/* 边框颜色 */
$border-color-dark: #DCDFE6;
$border-color-base: #E4E7ED;
$border-color-light: #EBEEF5;
$border-color-focus: #408d86;
// 背景颜色
$bg-color-light: #E0F2F1;
$bg-color-base: #D0EBEA;
$bg-color-dark: #43A49B;
/* 图片加载中颜色 */
$image-bg-color: #eee;
/* 行为相关颜色 */
$uni-color-primary:#26A69A;
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #dd524d;

/* 图片载入替代方案 */
.image-wrapper {
	font-size: 0;
	background: #E0F2F1;
	border-radius: 4px;
	image {
		width: 100%;
		height: 100%;
		transition: .6s;
		opacity: 0;

		&.loaded {
			opacity: 1;
		}
	}
}
// 图片上面的标签
.image-tag{
	position:absolute;
	top:0;
	left:0;
	width:40upx;
	height:40upx;
}
// 商品金额划线价
.list-price{
	color: $font-color-light;
	padding: 5upx;
	text-decoration: line-through;
	font-size:$font-sm;
}
/* 通用按钮样式 */
.button-base{
	border-radius: 100px;
	background: $bg-color-dark;
	width: 100%;
	height: 90upx;
	line-height: 90upx;
	color: #fff;
	font-size: $font-base;
	padding: 16upx 20upx;
	margin: 80upx 0 ;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	&:active{
		opacity: 0.5;
	}
}
// 镂空式按钮
.button-base-outline{
	border-radius: 100px;
	background: transparent;
	width: 100%;
	height: 90upx;
	line-height: 90upx;
	border: 1px solid $border-color-focus;
	color: $bg-color-dark;
	font-size: $font-base;
	padding: 16upx 20upx;
	margin: 80upx 0 ;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	&:active{
		background: $bg-color-dark;
		opacity: 0.5;
		color: #fff;
		border:none;
	}
}
/* 顶部tabbar */
.nav-bar {
	position: sticky;
	top:var(--window-top);
	background: $bg-color-light;
	z-index: 10;
	height: 100upx;
	white-space: nowrap;
	
	.nav-item {
		display: inline-block;
		width: 20%;
		height: 100upx;
		text-align: center;
		line-height: 100upx;
		font-size: 30upx;
		color:$font-color-base;
		position: relative;

		&:after {
			content: '';
			width: 0;
			height: 0;
			border-bottom: 4upx solid $border-color-focus;
			position: absolute;
			left: 50%;
			bottom: 0;
			transform: translateX(-50%);
			transition: .3s;
		}
	}

	.current {
		color: $font-color-selected;

		&:after {
			width: 50%;
		}
	}
}
// 固定在底部
.fixed-bottom {
	position: fixed;
	left: 16upx;
	right: 16upx;
	bottom: var(--window-bottom);
	z-index: 95;
	width: auto;
}
// 卡片式布局的卡片
.card{
	background: #fff;
	margin: 10px 0;
	padding: 10px;
	display: flex;
	flex-direction: column;
	justify-content: start;
	border-radius: 20upx;
	width: 100%;
}
